<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的个人博客</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header class="header">
      <div class="container">
        <h1 class="logo">我的博客</h1>
        <nav class="main-nav">
          <ul>
            <li><a href="index.html" class="active">首页</a></li>
            <li><a href="about.html">关于我</a></li>
            <li><a href="#contact">联系我</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <div class="container main-content">
      <main class="content">
        <section class="blog-posts">
          <h2>最新文章</h2>

          <article class="post">
            <h3><a href="article.html">HTML5新特性探索</a></h3>
            <div class="post-meta">
              <span class="date">2023年5月15日</span>
              <span class="category">前端开发</span>
            </div>
            <p>
              HTML5带来了许多令人兴奋的新特性，如语义化标签、本地存储、Canvas绘图等。本文将详细介绍这些新特性及其应用场景...
            </p>
            <a href="article.html" class="read-more">阅读更多</a>
          </article>

          <article class="post">
            <h3><a href="article.html">CSS3动画入门</a></h3>
            <div class="post-meta">
              <span class="date">2023年5月10日</span>
              <span class="category">前端开发</span>
            </div>
            <p>
              CSS3动画可以让你的网页更加生动有趣。学习如何使用@keyframes、transition和transform属性来创建流畅的动画效果...
            </p>
            <a href="article.html" class="read-more">阅读更多</a>
          </article>

          <article class="post">
            <h3><a href="article.html">JavaScript基础教程</a></h3>
            <div class="post-meta">
              <span class="date">2023年5月5日</span>
              <span class="category">前端开发</span>
            </div>
            <p>
              JavaScript是网页交互的核心。本教程将带你从零开始学习JavaScript的基础语法、DOM操作和事件处理...
            </p>
            <a href="article.html" class="read-more">阅读更多</a>
          </article>
        </section>
      </main>

      <aside class="sidebar">
        <div class="widget">
          <h3>关于我</h3>
          <img src="./pic/guigui.jpg" alt="我的头像" class="profile-img" />
          <p>我是前端开发爱好者，热爱学习新技术，喜欢分享知识。</p>
          <a href="about.html" class="btn">了解更多</a>
        </div>

        <div class="widget">
          <h3>分类</h3>
          <ul class="categories">
            <li><a href="#">前端开发</a></li>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">CSS技巧</a></li>
            <li><a href="#">HTML5</a></li>
          </ul>
        </div>

        <div class="widget">
          <h3>订阅</h3>
          <p>订阅我的博客，获取最新文章通知</p>
          <form class="subscribe-form">
            <input type="email" placeholder="你的邮箱地址" />
            <button type="submit" class="btn">订阅</button>
          </form>
        </div>
      </aside>
    </div>

    <footer class="footer">
      <div class="container">
        <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
        <div class="social-links">
          <a href="#"><i class="fab fa-github"></i></a>
          <a href="#"><i class="fab fa-twitter"></i></a>
          <a href="#"><i class="fab fa-linkedin"></i></a>
        </div>
      </div>
    </footer>

    <button id="back-to-top" title="回到顶部">↑</button>
    <script src="js/script.js"></script>
  </body>
</html>
